<template>
	<view>
		<cu-custom style="height: 0px;" class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">人员实时位置</block>
		</cu-custom>
		<unifab @dragClick="refresh" creatTop="80" creatLeft="85" imageBackgroundSize='100% 100%'  width='100rpx' height='100rpx' image="/static/refresh.png" imageWidth="60upx"></unifab>
		<u-notice-bar mode="horizontal" type="primary" :list="message"></u-notice-bar>
		<view class="container">
			<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
			<view class="page-body">
				<map :show-location="true" class="map" id="myMap" ref="myMap" style="width:100%;height:100vh" :latitude="map.latitude" :longitude="map.longitude"
				 :markers="covers"  @markertap="markertap" @tap="tap"></map>
			</view>
			
			<view style="display: none;" class="btnBox">
				<button @click="changeTimeSlot" class="cu-btn bg-blue round shadow lg">切换人员</button>
			</view>
		</view>
	</view>
</template>

<!-- 注：vue只支持小程序及H5，如打包App，请修改代码为nvue，或加群要文件 -->

<script>	
import request from '@/common/request.js';
import unifab from "@/components/beyondGod-drag/beyoundGod-drag.vue";
	export default {
		components: {
			unifab
		},
		data() {
			return {
				timer:null,
				message:[
					'当前页面实时刷新频率为20S，您可以点击右下角刷新按钮手动刷新'
				],
				show: false,
				list: [
					{
						value: 2,
						label: '巡检计划1',
						children: [
							{
								value: 3,
								label: '11:00 ~ 12:00'
							},
							{
								value: 4,
								label: '12:00 ~ 14:00'
							}
						]
					},
					{
						value: 5,
						label: '巡检计划2',
						children: [
							{
								value: 6,
								label: '03:00 ~ 06:00'
							},
							{
								value: 7,
								label: '08:00 ~ 10:00'
							}
						]
					}
				],
				map: {
					mapObj: {},
					latitude: 31.943763,
					longitude: 118.86637,
					scale: 13, // 默认16
					markers: [
						
					],
					marker: {},
					lastMarker: {}
				},
				covers: [],
				windowHeight:0
			}
		},
		onReady() {
			// 创建map对象
			// this.map = uni.createMapContext('map');
			// // 获取屏幕高度
			// uni.getSystemInfo({
			// 	success: res => {
			// 		this.windowHeight = res.windowHeight;
			// 	}
			// });
		},
		onUnload() {
			clearTimeout(this.timer); 
			this.timer = null;
		},
		mounted() {
			this.map.mapObj = uni.createMapContext("myMap", this);   // 得到map对象
			this.getLocation1();
			this.getOnlineUserList();
			this.setInterval1();
		},
		methods: {
			setInterval1(){
				this.timer=setInterval(()=>{
					this.getOnlineUserList(false);
				},20000)
			},
			refresh(){
				this.getOnlineUserList(true);
			},
			getOnlineUserList(refresh){
				if(refresh){
					uni.showLoading({
						title: '加载中'
					})
				}
				let that=this
				let opts = {
					url: 'api/GetOnlineUser',
					method: 'get'
				};
				that.covers=[]
				request.httpTokenRequest(opts).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						if(res.data.data.length>0){
							for(let i = 0; i < res.data.data.length; i++) {
								let data = res.data.data[i];
								that.covers.push(
								{
									latitude:data.Latitude,
									longitude:data.Longitude,
									iconPath:'/static/poi/user.png',
									callout:{
										content:data.RealName,
										color:'#fff',
										fontSize:10,
										bgColor:'#25A5F7',
										padding:'5px 12px',
										display:'ALWAYS',
										textAlign:'center'
									}
								});
							}
						}
					}
				})
				
			},
			// 获取地理位置
			getLocation1() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy:true,
					success(res) {
						console.log(res)
						that.map.latitude = res.latitude;
						that.map.longitude = res.longitude;
						that.map.scale = 13;
					},
					fail: function () {
						console.log('获取定位失败，请退出登陆重新授权定位')
					}
				});
				that.map.mapObj.moveToLocation();	//移动到当前定位地点
			},
			changeTimeSlot(){
				this.show=true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
	}

	.btnBox {
		width: 750rpx;
		position: absolute;
		bottom: 220rpx;
		z-index: 9999;
		display: flex;
		justify-content: space-around;
	}
</style>
